import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import UserLoginView from '../views/UserLoginView.vue'
import HomeView from '../views/HomeView.vue'
import store from '@/store'
import AdminLoginView from '../views/AdminLogin.vue'
import AdminHomeView from '../views/AdminHomeView.vue'
import RegisterView from '../views/RegisterView.vue'
import GoodsTypeManageComponent from '../components/goodstype/GoodsTypeManageComponent.vue'
import GoodsTypeEditComponent from '../components/goodstype/GoodsTypeEditComponent.vue'
import GoodsAddComponent from '../components/goods/GoodsAddComponent.vue'
import GoodsQueryComponent from '../components/goods/GoodsQueryComponent.vue'
import GoodsEditComponent from '../components/goods/GoodsEditComponent.vue'
import GoodsShowComponent from '../components/goods/GoodsShowComponent.vue'
import GoodsInfoComponent from '../components/goods/GoodsInfoComponent.vue'
import UserManageView from '../views/UserManageView.vue'
import CartQueryComponent from '../components/cart/CartQueryComponent.vue'
import CartEditComponent from '../components/cart/CartEditComponent.vue'
import AddressManageComponent from '../components/address/AddressManageComponent.vue'
import AddressEditComponent from '../components/address/AddressEditComponent.vue'
import UserAddComponent from '../components/user/UserAddComponent.vue'
import UserQueryComponent from '../components/user/UserQueryComponent.vue'
import UserEditComponent from '../components/user/UserEditComponent.vue'
import UserSelfEditComponent from '../components/user/UserSelfEditComponent.vue'
import AdminAddComponent from '../components/admin/AdminAddComponent.vue'
import OrdersAddView from '../views/OrdersAddView.vue'
import OrdersQueryComponent from '../components/orders/OrdersQueryComponent.vue'
import OrdersManageComponent from '../components/orders/OrdersManageComponent.vue'
import CommentAddComponent from '../components/comments/CommentsAddComponent.vue'
import CommentQueryComponent from '../components/comments/CommentsQueryComponent.vue'
import CommentsManageComponent from '../components/comments/CommentsManageComponent.vue'
import PaySuccessView from '../views/PaySuccessview.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    children: [
      {
        path: '/showgoods/:id?/:goodsName?',
        name: 'showgoods',
        component: GoodsShowComponent,
        props: (route) => ({
          id: Number(route.params.id),
          goodsName: route.params.goodsName
        })
      },
      {
        path: '/goodsinfo/:id/:goodsName/:goodsPrize/:goodsDesc/:goodsPicture/:goodsReleaseTime/:goodsTypeId/:goodsType',
        name: 'goodsinfo',
        component: GoodsInfoComponent,
        props: (route) => ({
          id: route.params.id,
          goodsName: route.params.goodsName,
          goodsPrize: route.params.goodsPrize,
          goodsDesc: route.params.goodsDesc,
          goodsPicture: route.params.goodsPicture,
          goodsReleaseTime: route.params.goodsReleaseTime,
          goodsTypeId: route.params.goodsTypeId,
          goodsType: route.params.goodsType,
        })
      },
    ]
  },
  {
    path: '/userlogin',
    name: 'userlogin',
    component: UserLoginView
  },
  {
    path: '/adminlogin',
    name: 'adminlogin',
    component: AdminLoginView
  },
  {
    path: '/adminhome',
    name: 'adminhome',
    component: AdminHomeView,
    children: [
      {
        path: '/managegoodstype',
        name: 'managegoodstype',
        component: GoodsTypeManageComponent,
      },
      {
        path: '/editgoodstype/:id/:goodsType',
        name: 'editgoodstype',
        component: GoodsTypeEditComponent,
        props: (route) => ({
          id: route.params.id,
          goodsType: route.params.goodsType
        })
      },
      {
        path: '/addgoods',
        name: 'addgoods',
        component: GoodsAddComponent,
      },
      {
        path: '/querygoods',
        name: 'querygoods',
        component: GoodsQueryComponent,
      },
      {
        path: '/editgoods/:id/:goodsName/:goodsPrize/:goodsDesc/:goodsTypeId/:goodsPicture',
        name: 'editgoods',
        component: GoodsEditComponent,
        props: (route) => ({
          id: route.params.id,
          goodsName: route.params.goodsName,
          goodsPrize: route.params.goodsPrize,
          goodsDesc: route.params.goodsDesc,
          goodsTypeId: route.params.goodsTypeId,
          goodsPicture: route.params.goodsPicture,
        })
      },
      {
        path: '/adduser',
        name: 'adduser',
        component: UserAddComponent,
      },
      {
        path: '/queryuser',
        name: 'queryuser',
        component: UserQueryComponent,
      },
      {
        path: '/edituser/:id/:userName/:userPwd/:avatar?/:telephone?/:mail?/:gender?',
        name: 'edituser',
        component: UserEditComponent,
        props: (route) => ({
          id: route.params.id,
          userName: route.params.userName,
          userPwd: route.params.userPwd,
          avatar: route.params.avatar,
          telephone: route.params.telephone,
          mail: route.params.mail,
          gender: route.params.gender
        })
      },
      {
        path: '/addadmin',
        name: 'addadmin',
        component: AdminAddComponent,
      },
      {
        path: '/ordersmanage/:userId?',
        name: 'ordersmanage',
        component: OrdersManageComponent,
        props: (route) => ({
          userId: route.params.userId
        })
      },
      {
        path: '/managecomments',
        name: 'managecomments',
        component: CommentsManageComponent,
      },
    ]
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/usermanage',
    name: 'usermanage',
    component: UserManageView,
    children: [
      {
        path: '/cartquery',
        name: 'cartquery',
        component: CartQueryComponent,
      },
      {
        path: '/addressmanage',
        name: 'addressmanage',
        component: AddressManageComponent,
      },
      {
        path: '/addressedit/:id/:address',
        name: 'addressedit',
        component: AddressEditComponent,
        props: (route) => ({
          id: route.params.id,
          address: route.params.address,
        })
      },
      {
        path: '/edituserself/:id/:userName/:userPwd/:avatar?/:telephone?/:mail?/:gender?',
        name: 'edituserself',
        component: UserSelfEditComponent,
        props: (route) => ({
          id: route.params.id,
          userName: route.params.userName,
          userPwd: route.params.userPwd,
          avatar: route.params.avatar,
          telephone: route.params.telephone,
          mail: route.params.mail,
          gender: route.params.gender
        })
      },
      {
        path: '/ordersquery/:userId?',
        name: 'ordersquery',
        component: OrdersQueryComponent,
        props: (route) => ({
          userId: route.params.userId
        })
      },
      {
        path: '/commentsquery/:ordersId/:userId/:goodsId',
        name: 'commentsquery',
        component: CommentQueryComponent,
        props: (route) => ({
          ordersId: route.params.ordersId,
          userId: route.params.userId,
          goodsId: route.params.goodsId
        })
      },
    ]
  },
  {
    path: '/cartedit/:id/:goodsName/:goodsPrize/:goodsDesc/:goodsPicture/:goodsId/:cartCount/:goodsTypeId/:goodsType',
    name: 'cartedit',
    component: CartEditComponent,
    props: (route) => ({
      id: route.params.id,
      goodsName: route.params.goodsName,
      goodsPrize: route.params.goodsPrize,
      goodsDesc: route.params.goodsDesc,
      goodsPicture: route.params.goodsPicture,
      goodsId: route.params.goodsId,
      cartCount: route.params.cartCount,
      goodsTypeId: route.params.goodsTypeId,
      goodsType: route.params.goodsType
    })
  },
  {
    path: '/addorders/:userId/:userName/:goodsId/:goodsName/:orderPrize/:goodsTypeId/:goodsType/:goodsPicture/:orderCount/:telephone',
    name: 'addorders',
    component: OrdersAddView,
    props: (route) => ({
      userId: route.params.userId,
      userName: route.params.userName,
      goodsId: route.params.goodsId,
      goodsName: route.params.goodsName,
      orderPrize: route.params.orderPrize,
      goodsTypeId: route.params.goodsTypeId,
      goodsType: route.params.goodsType,
      goodsPicture: route.params.goodsPicture,
      orderCount: route.params.orderCount,
      telephone: route.params.telephone
    })
  },
  {
    path: '/commentadd/:ordersId/:userId/:goodsId',
    name: 'commentadd',
    component: CommentAddComponent,
    props: (route) => ({
      ordersId: route.params.ordersId,
      userId: route.params.userId,
      goodsId: route.params.goodsId,
    })
  },
  {
    path: '/paysuccess',
    name: 'paysuccess',
    component: PaySuccessView,
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})


router.beforeEach((to, from, next) => {
  // 定义需要管理员权限的路由路径
  const adminPaths = ['/adminhome'];

  if (to.path === '/userlogin' || to.path === '/register' || to.path === '/adminlogin') {
    // 如果跳转为登录页面，则放行
    next();
  } else if (adminPaths.includes(to.path)) {
    // 如果跳转的路径需要管理员权限

    // 取出vuex中的角色信息，判断是否为管理员
    const role = store.state.roleId;
    if (role !== '1') {
      alert('该页面需要管理员权限');
      next({ name: 'adminlogin' });
    } else {
      next();
    }
  } else {
    // 其他路径，需要登录后访问

    // 取出 localStorage 中的 token，判断是否已登录
    const token = store.state.token;
    if (token == null || token === '') {
      alert('请先登录');
      next({ name: 'userlogin' });
    } else {
      next();
    }
  }
});

export default router
